<template>
	<view>
        <public-module></public-module>
        <wlk-navbar title="系统设置" navbarType='3'></wlk-navbar>
        <view class="set-content">
            <view class="head-cell br08">
                <u-cell-group :border="false">
                    <u-cell isLink url="/pages/user/info" center clickable size="large" :border="false" :title="userInfo.nickname" :titleStyle="headTitleStyle" :rightIconStyle="headRightIconStyle">
                        <view slot="icon" class="mr10 pt10 pb10">
                            <u-avatar :src="userInfo.avatar" size="50"></u-avatar>
                        </view>
                        <span class="bz mt05" slot="label">设置头像、生日等</span>
                    </u-cell>
                </u-cell-group>
            </view>
            <view class="item-cell br08">
                <u-cell-group :border="false">
                    <u-cell isLink url="/pages/user/safe" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-user-list" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                          账号安全
                        </span>
                    </u-cell>
                    <u-cell isLink :url="'/pages/article/detail?id='+[initMain.content?initMain.content.agreement:'']" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-ericsson" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                            服务协议
                        </span>
                    </u-cell>
                    <u-cell isLink :url="'/pages/article/detail?id='+[initMain.content?initMain.content.privacy:'']" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-shape-hexagon" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                            隐私政策
                        </span>
                    </u-cell>
                    <u-cell isLink :url="'/pages/article/detail?id='+[initMain.content?initMain.content.about:'']" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-laptop" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                            关于我们
                        </span>
                    </u-cell>
                    <!-- #ifdef MP-WEIXIN -->
                    <u-cell :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false" @click="update">
                        <view slot="icon" class="icon-box wlkflex ">
                            <i class="gg-open-collective" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                          检查更新
                        </span>
                        <span slot="value" class="bz">
                            {{initMain.content?initMain.content.version:''}}
                        </span>
                    </u-cell>
                    <!-- #endif -->
                    <u-cell :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center :border="false" >
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-ghost" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                          本地缓存
                        </span>
                        <span slot="value" class="bz">
                            {{currentSize}}
                        </span>
                    </u-cell>

                </u-cell-group>
            </view>
            <view class="record">
                备案号：{{record.content.wxMiniProgram}}
            </view>
        </view>
        <view class="wlk-fixed-btn">
            <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }" :color="themeColor" size="large" @click="showModal" text="退出登录"></u-button>
        </view>
        <u-modal :show="show" @confirm="confirm" @cancel="show=false" content="确定退出登录？" :confirmColor="themeColor" showCancelButton></u-modal>
	</view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
			    headTitleStyle:{
                    color:'#333333',
                    fontWeight: 'bold',
                    fontSize:'35rpx'
                },
                headRightIconStyle:{
			        color:'#333333',
                    fontWeight: 'bold',
                    fontSize:'44rpx'
                },
                itemTitleStyle:{
                    color:'#333333',
                },
                iconStyle:{
                    color:'#333333',
                },
                show:false,
                currentSize:''
			};
		},
        computed: {
            ...mapGetters(['userInfo','themeColor','initMain','record'])
        },
        onLoad(){
		    var that = this;
            uni.getStorageInfo({
                success: function(res) {
                    that.currentSize = res.currentSize+'KB'; // 当前已使用的缓存大小，单位：KB
                }
            });
        },
        methods: {
            ...mapActions(['logout','mp_update']),
            showModal() {
                this.show = true;
            },
            confirm() {
                this.logoutFun();
            },
            logoutFun() {
                this.logout(true);
            },
            update() {
                this.mp_update(true)
            },

        }
	}
</script>

<style lang="scss">
    .set-content{
        width: 92%;
        margin: 40rpx auto 0 auto;
        .head-cell{
            background-color: #FFFFFF;
            box-shadow: 0 2px 4px rgba(0,0,0,.02);
            .bz{
                font-size: $font-sm;
                color: $uni-text-color-grey;
            }
        }
        .item-cell{
            background-color: #FFFFFF;
            margin-top: 50rpx;
            box-shadow: 0 2px 4px rgba(0,0,0,.02);
            .u-cell{
                padding:10rpx 0;

            }
            .icon-box{
                width: 70rpx;
            }
            .title{
                font-size: $font-base;
                font-weight: 600;
            }
            .bz{
                font-size: $font-base;
                color: $uni-text-color-grey;
            }
        }
    }
    .wlk-fixed-btn{
        box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
        background-color: transparent;
    }
</style>
